<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="top">
			<view class="find">
				<image src="../../static/sousuo.png" mode="widthFix"></image>
			</view>
			<input placeholder="请输入搜索关键字..." class="input" v-model="input" @confirm="inputs"/>
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<uni-swiper-dot :info="bannerList" :current="current" field="content" :mode="mode" :dotsStyles="data">
				<swiper interval="2000" circular="true" class="swiper-box" @change="change" @click="goPage">
					<swiper-item v-for="item in bannerList" :key="item.id" class="swiperItem">
						<image :src="$host+item.src" class="bannerImage">

						</image>
					</swiper-item>

				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="cake">
			<view class="cak1">
				<image :src="$host+'cak1.jpg'" mode="widthFix"> </image>
			</view>
			<view class="cak2">
				<image mode="widthFix" :src="$host+'c1.jpg'" @click="gril"></image>
				<image mode="widthFix" :src="$host+'c2.jpg'" @click="boy"></image>
				<image mode="widthFix" :src="$host+'c3.jpg'" @click="gr"></image>
				<image mode="widthFix" :src="$host+'c4.jpg'" @click="by"></image>
				<image mode="widthFix" :src="$host+'c5.jpg'" @click="old"></image>
				<image mode="widthFix" :src="$host+'c6.jpg'" @click="cook"></image>
				<image mode="widthFix" :src="$host+'c7.jpg'" @click="four"></image>
				<image mode="widthFix" :src="$host+'c8.jpg'"></image>
			</view>

		</view>
		<view class="sweet">
			<view class="title">
				<image :src="$host+'lt.jpg'" mode="widthFix"></image>
			</view>
			<view class="titleImg">
				<image :src="$host+'l1.jpg'" mode="widthFix" @click="sweet"></image>
				<image :src="$host+'l2.jpg'" mode="widthFix" @click="bread"></image>
				<image :src="$host+'l3.jpg'" mode="widthFix" @click="ls"></image>
				<image :src="$host+'l4.jpg'" mode="widthFix" @click="dr"></image>
			</view>
			
		</view>
		<view class="colors"></view>
		<view class="hy" @click="hy">
				<image :src="$host+'hy.jpg'" mode="widthFix"></image>
		</view>
	       <view class="buybox">
			   <view class="buy">
			   	<view>
			   		<image  :src="$host+'buy1.jpg'" mode="widthFix"></image>
			   	</view>
			   	<view>
			   		<image  :src="$host+'buy1.jpg'" mode="widthFix"></image>
			   	</view>
			   	<view>
			   		<image  :src="$host+'buy2.jpg'" mode="widthFix"></image>
			   	</view>
			   	<view>
			   		<image  :src="$host+'buy3.jpg'" mode="widthFix"></image>
			   	</view>
			   	<view>
			   		<image  :src="$host+'buy4.jpg'" mode="widthFix"></image>
			   	</view>
			   	<view>
			   		<image  :src="$host+'buy5.jpg'" mode="widthFix"></image>
			   	</view>
		   </view>
		</view>
		<view class="cl">
			 <image mode="widthFix" :src="$host+'cl.jpg'"></image>
		</view>
		<view class="cl1">
			 <image mode="widthFix" :src="$host+'cl1.jpg'"></image>
		</view>





	</view>
</template>

<script>
	

import {
		mapState
	} from "vuex"
	export default {
		data() {

			return {
				$host: this.$host,
				bannerList: [],
				current: 0,
				mode: "default",
				input:"",
				data: {
					bottom: 0,
					backgroundColor: "#fff0d3",
					selectedBackgroundColor: "#ffffff"
                 

				},
				$host: this.$host

			}
		},

		computed: {
			...mapState(["list"])
		},
		onLoad() {
   

			this.$request("/getBannerList", "post", {}).then(res => {
				this.bannerList = res.data


			})
		},
		onReady() {

		},
		methods: {
			inputs(){
							  if(this.input=="蛋糕" || this.input=="女生"){
								uni.navigateTo({
									 url:"/pages/person/gr"
								}) 
								  
							  }else if(this.input=="男生" || this.input=="男士"){
								      uni.navigateTo({
								      	url:"/pages/person/br"
								      })
							  }else if(this.input=="长辈" || this.input=="老人"){
								      uni.navigateTo({
								      	url:"/pages/person/old"
								      })
							  }else if(this.input=="小孩" || this.input=="男孩"){
								      uni.navigateTo({
								      	url:"/pages/person/boy"
								      })
							  }else if(this.input=="面包" || this.input=="零食"){
								      uni.navigateTo({
								     url:"/pages/person/ls"
								      })
							  }else if(this.input=="饮品" || this.input=="饮料"){
								      uni.navigateTo({
								      	url:"/pages/person/drink"
								      })
							  }else if(this.input=="4寸" || this.input=="四寸蛋糕"){
								      uni.navigateTo({
								      	url:"/pages/person/four"
								      })
							  }else{
								     uni.navigateTo({
								     	url:`/pages/index/noshops?input=${this.input}`
								     }) 
							  }
							  
							   
			},
			dr(){
				uni.navigateTo({
					url:"/pages/person/drink"
				})
			},
			ls(){
				uni.navigateTo({
					url:"/pages/person/ls"
				})
			},
			bread(){
				uni.navigateTo({
					url:"/pages/person/bread"
				})
			},
			sweet(){
				uni.navigateTo({
					url:"/pages/person/sweetfood"
				})
			},
			four(){
				uni.navigateTo({
					url:"/pages/person/four"
				})
			},
				
			cook(){
				uni.navigateTo({
					url:"/pages/person/cook"
				})
			},
			old(){
				uni.navigateTo({
					url:"/pages/person/old"
				})
			},
			by(){
				uni.navigateTo({
					url:"/pages/person/br"
				})
			},
			gr(){
				uni.navigateTo({
					url:"/pages/person/gr"
				})
			},
			gril(){
				uni.navigateTo({
					url:"/pages/person/index"
				})
			},
			boy(){
				uni.navigateTo({
					url:"/pages/person/boy"
				})
			},
			change(e) {
				this.current = e.detail.current
				
			},
			
			goPage(e){
				  if(this.current==1){
				  	uni.navigateTo({
				  		url:"/pages/bannerTwo/index"
				  	}) 	  
				  }
			},
			hy(){
				 uni.navigateTo({
				 	url:"/pages/mine/makemoney"
				 })
			}
			
			
		},
		
		
	}
</script>

<style>
	/* 搜索框 */
	.top {
		height: 100rpx;
		width: 100%;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		/* border: 1px solid grey; */
		flex-basis: 84%;
		height: 70rpx;
		background-color: #f6f6f6;
		border-radius: 30rpx;
		padding-left: 82rpx;


	}

	.find>image {
		width: 50rpx;
	}

	.find {
		width: 50rpx;
		position: absolute;
		top: 26rpx;
		left: 42rpx;
	}

	/* 轮播图 */

	.banner {
		text-align: center;

		width: 100%;
		background-color: #fff0d3;

	}

	swiper {
		height: 250px;
	}

	.bannerImage {
		width: 100%;
	}

	/* 下半部分图片区 */
	.cak1 image {
		width: 340px;
	}

	.cak1 {
		text-align: center;
		
		background-color: #fff0d3;
	}
	.cak2{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
			background-color: #fff0d3;
	}
	.cak2>image{
		width: 60px;
		padding: 5px 30rpx;
	}
		
	.cak2>image:nth-child(1){
		width: 70px;
		position: relative;
		top: 4rpx;
	}
	.cak2>image:nth-child(2){
		width: 50px;
	}
	.cak2>image:nth-child(3){
		width: 66px;
	}
	.cak2>image:nth-child(4){
		width: 46px;
	}
	.cak2>image:nth-child(5){
		width: 48px;
	}
	.cak2>image:nth-child(6){
		position: relative;
			left: 8rpx;
		width: 54px;
	}
	.cak2>image:nth-child(7){
		width: 54px;
		position: relative;
		top: -18rpx;
		left: 8rpx;
	}
	.cak2>image:nth-child(8){
		width: 54px;
		position: relative;
		top: -8rpx;
		left: 24rpx;
	}
	/* 甜 */
	.title{
		 text-align:right;
		 background-color: #fff0d3;
	}
	.titleImg{
		display: flex;
		justify-content: space-around;
		background-color: #fff0d3;
	
	}
	.titleImg>image{
		   width: 70px;
	}
	.hy{
		text-align: center;
		background-color: #fff0d3;
	}
	.colors{
		width: 100%;
		background-color: #fff0d3;
		height: 20px;
	}
	.buy{
		 width: 340px;
		 height: 220px;
		 display: flex;
		 flex-wrap: wrap;
		 background-color: white;
	   margin: 0 auto;
	   border-radius: 8px;
	   
	
	  
	 
	
		
	}
	.buy>view{
		 width: 78px;
		 height: 78px;
		margin-left: 20px;
		margin-top: 20px;
		background-color: #f4eddd;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		left: 30rpx;
		top: -5px;
		border-radius: 6px;
	  
	}
	.buy image{
		width: 60px;
		
	}
	.buybox{
		width: 100%;
		background-color: #fff0d3;
		height: 240px;
		display: flex;
		justify-content: center;
		align-items:center;
	}
	.cl{
	
		background-color: #fff0d3;
	}
	.cl1{
		background-color: #fff0d3;		
	}
	.cl>image{
		 width: 100%;
	}
	.cl1>image{
		 width: 100%;
	}
	.uni-swiper__dots-item {
		width: 45px  !important;
		height: 2px  !important;
	}
	.uni-swiper__dots-box {
		position:absolute;
		bottom: 0px;
	
	}
</style>
